// 引导页

import 'package:flutter/material.dart';
import 'package:flutter_baby_health_tracker/util/sp_util.dart';
import 'package:flutter_baby_health_tracker/widgets/date_input.dart';

import '../widgets/single_select_input.dart';

class LeadingScreen extends StatefulWidget {
  const LeadingScreen({super.key});

  @override
  State<LeadingScreen> createState() => _LeadingScreenState();
}

class _LeadingScreenState extends State<LeadingScreen> {
  String? babyName;

  String? birthDay;

  String? gender;

  final List<String> genders = ['男', '女', '保密'];

  bool get enable => birthDay != null && gender != null && birthDay != null;


  void saveBaby() async{
    debugPrint('saveBaby');
    await SpUtil().save('first_run', false);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(elevation: 0),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: kToolbarHeight * 2),
              Center(
                child: Text(
                  '请先填写宝宝信息',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.normal),
                ),
              ),
              SizedBox(height: kToolbarHeight),
              TextFormField(
                style: TextStyle(
                  fontSize: 18,
                  color: Colors.grey.shade800,
                ), // 输入文本样式
                decoration: InputDecoration(
                  hintText: '宝宝姓名',
                  labelStyle: TextStyle(color: Colors.grey.shade800),
                  labelText: '宝宝姓名',
                  prefixIcon: Icon(Icons.person), // 前缀图标[8](@ref)
                  // 不同状态下的边框
                  enabledBorder: OutlineInputBorder(
                    // 未聚焦时下划线[7](@ref)
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  focusedBorder: OutlineInputBorder(
                    // 聚焦时外边框[4](@ref)
                    borderSide: BorderSide(color: Colors.green, width: 2),
                  ),
                  errorBorder: OutlineInputBorder(
                    // 错误状态边框[5](@ref)
                    borderSide: BorderSide(color: Colors.red),
                  ),
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 16,
                  ),
                ),
                onChanged: (value) {
                  setState(() {
                    babyName = value;
                  });
                },
              ),
              SizedBox(height: 32),
              DateInputField(
                label: '宝宝生日',
                onValueSelected: (value) {
                  setState(() {
                    birthDay = value;
                  });
                },
              ),
              SizedBox(height: 32),
              SingleSelectInputField(
                title: '选择性别',
                options: genders,
                label: '宝宝性别',
                onValueSelected: (int value) {
                  setState(() {
                    gender = genders[value];
                  });
                },
              ),
              SizedBox(height: 32),
              FractionallySizedBox(
                widthFactor: 1,
                child: GestureDetector(
                  onTap: ()=>saveBaby(),
                  child: Container(
                    decoration: BoxDecoration(
                      color: enable? Colors.green: Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(4),
                      border:enable?null:Border.all(
                        color: Colors.grey
                      )
                    ),
                    padding: EdgeInsets.all(16),
                    child: Center(
                      child: Text('完成', style: TextStyle(color: enable? Colors.white:Colors.black)),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
